import { Icon, Table } from 'antd';
import React from 'react';
import { ColumnProps } from 'antd/lib/table';
import { OrderItem } from '../../model';

const columns: ColumnProps<OrderItem>[] = [
  {
    title: '商品图片',
    dataIndex: 'productPic',
    align: 'center',
    render: picUrl => <img style={{ height: '80px' }} src={picUrl} alt="" />,
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
    align: 'center',
  },
  {
    title: '单价',
    key: 'unitPrice',
    align: 'center',
    render: (_text, record) => `￥${record.price / record.quantity}`,
  },
  {
    title: '属性',
    dataIndex: 'productAttr',
    align: 'center',
    render: value => {
      const br = <br />;
      const attrArray = JSON.parse(value).map(
        (each: { key: any; value: any }) => `${each.key}：${each.value}`,
      );
      let result: {} | null | undefined;
      attrArray.forEach((attr: React.ReactNode, index: any) => {
        if (index === 0) {
          result = attr;
        } else {
          result = (
            <span>
              {result}
              {br}
              {attr}
            </span>
          );
        }
      });
      return result;
    },
  },
  {
    title: '数量',
    dataIndex: 'quantity',
    align: 'center',
  },
  {
    title: '小计',
    dataIndex: 'price',
    align: 'center',
    render: price => `￥${price}`,
  },
];

interface OrderItemInfoProps {
  items: OrderItem[];
}

const OrderItemInfo: React.FC<OrderItemInfoProps> = props => (
  <div>
    <div style={{ marginBottom: '15px' }}>
      <Icon type="info-circle" theme="filled" />
      <span style={{ marginLeft: '7px' }}>商品信息</span>
    </div>
    <Table<OrderItem> dataSource={props.items} columns={columns} rowKey="id" bordered />
  </div>
);

export default OrderItemInfo;
